<template>
  <div class="oneself-center">
    <div class="center-container">
      <div class="background-image" :style="{ backgroundImage: `url(${user.background})` }">
        <div class="user-info">
          <div class="avatar">
            <img :src="user.avatar" alt="avatar" />
          </div>
          <div class="details">
            <h1>{{ user.name }}</h1>
            <p class="gender">{{ user.gender }}</p>
            <p class="signature">{{ user.signature }}</p>
            <div class="stats">
              <span>粉丝: {{ user.followers }}</span>
              <span>关注: {{ user.following }}</span>
              <span>点赞: {{ user.likes }}</span>
            </div>
            <p class="email">{{ user.email }}</p>
          </div>
        </div>
      </div>

      <div class="content-area">
        <div class="left-nav">
          <div
              v-for="item in navItems"
              :key="item.key"
              class="nav-item"
              :class="{ active: activeNav === item.key }"
              @click="activeNav = item.key"
          >
            {{ item.label }}
          </div>
        </div>

        <div class="right-content">
          <div v-if="activeNav === 'profile'" class="profile-info">
            <h2>个人信息</h2>
            <div class="info-item">
              <label>账号号码:</label>
              <span>{{ user.account }}</span>
            </div>
            <div class="info-item">
              <label>姓名:</label>
              <span v-if="!isEditing">{{ user.name }}</span>
              <el-input v-else v-model="editForm.name" />
            </div>
            <div class="info-item">
              <label>性别:</label>
              <span v-if="!isEditing">{{ user.gender }}</span>
              <el-select v-else v-model="editForm.gender">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </div>
            <div class="info-item">
              <label>QQ邮箱:</label>
              <span v-if="!isEditing">{{ user.email }}</span>
              <el-input v-else v-model="editForm.email" type="email" />
            </div>
            <div class="info-item">
              <label>个性签名:</label>
              <span v-if="!isEditing">{{ user.signature }}</span>
              <el-input v-else v-model="editForm.signature" />
            </div>
            <div class="info-item">
              <label>头像:</label>
              <img :src="user.avatar" alt="avatar" class="info-avatar" />
            </div>
            <div class="info-item">
              <label>背景:</label>
              <img :src="user.background" alt="background" class="info-background" />
            </div>
            <div class="info-item">
              <el-button v-if="!isEditing" @click="startEditing">更改信息</el-button>
              <el-button v-else type="primary" @click="saveChanges">确认更改</el-button>
              <el-button v-if="isEditing" @click="cancelEditing">取消</el-button>
            </div>
          </div>

          <PersonalPost v-if="activeNav === 'posts'" />
          <PostCollect v-if="activeNav === 'favorites'" :favorites="user.favorites" />
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import PersonalPost from './PersonalPost.vue'
import PostCollect from './PostCollect.vue'
import { useCounterStore } from '@/stores/counter'
import { ElMessage } from 'element-plus'

const counterStore = useCounterStore()
const route = useRoute()

interface User {
  id: number
  account: string
  name: string
  gender: string
  followers: number
  following: number
  likes: number
  email: string
  signature: string
  avatar: string
  background: string
  favorites: Topic[]
}

interface Topic {
  id: number
  title: string
  author: string
  avatar: string
  timeAgo: string
  description: string
  likes: number
  comments: number
}

interface NavItem {
  key: string
  label: string
}

const user = ref<User>({
  id: 1,
  account: '123456789',
  name: '张三',
  gender: '男',
  followers: 120,
  following: 45,
  likes: 300,
  email: 'zhangsan@qq.com',
  signature: '热爱编程，热爱生活',
  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  background: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  favorites: []
})

const navItems = ref<NavItem[]>([
  { key: 'profile', label: '个人信息' },
  { key: 'posts', label: '我的发帖' },
  { key: 'favorites', label: '我的收藏' },
  { key: 'settings', label: '设置' },
])

const activeNav = ref(route.query.tab?.toString() || 'profile')
const isEditing = ref(false)
const editForm = ref({
  name: '',
  gender: '',
  email: '',
  signature: '',
})

onMounted(async () => {
  try {
    const userData = await counterStore.getUserProfile(user.value.id)
    user.value = { ...user.value, ...userData }

    const favorites = await counterStore.getFavorites(user.value.id)
    user.value.favorites = favorites
  } catch (error) {
    ElMessage.error('加载用户信息失败')
  }
})

watch(() => route.query.tab, (newTab) => {
  if (newTab) activeNav.value = newTab.toString()
})

const startEditing = () => {
  editForm.value = {
    name: user.value.name,
    gender: user.value.gender,
    email: user.value.email,
    signature: user.value.signature,
  }
  isEditing.value = true
}

const saveChanges = async () => {
  try {
    const updatedUser = await counterStore.updateUserProfile(user.value.id, {
      name: editForm.value.name,
      gender: editForm.value.gender,
      email: editForm.value.email,
      signature: editForm.value.signature
    })

    user.value = { ...user.value, ...updatedUser }
    isEditing.value = false
    ElMessage.success('个人信息更新成功')
  } catch (error) {
    ElMessage.error('更新个人信息失败')
  }
}

const cancelEditing = () => {
  isEditing.value = false
}
</script>

<style scoped>

.oneself-center {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.center-container {
  width: 100%;
  max-width: 1000px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 830px;
}

.background-image {
  height: 210px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.details h1 {
  margin: 0 0 10px;
  font-size: 1.8em;
}

.gender {
  margin: 0;
  font-size: 0.9em;
}

.signature {
  margin: 10px 0;
  font-style: italic;
  font-size: 0.9em;
}

.stats {
  display: flex;
  gap: 15px;
  margin: 10px 0;
  font-size: 0.9em;
}

.email {
  margin: 0;
  font-size: 0.9em;
}

.content-area {
  display: flex;
  height: calc(100% - 240px);
}

.left-nav {
  width: 25%;
  background-color: #f9f9f9;
  padding: 20px;
  border-right: 1px solid #eee;
}

.nav-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.nav-item:hover {
  background-color: #f0f0f0;
}

.nav-item.active {
  background-color: #42b983;
  color: white;
}

.right-content {
  width: 75%;
  padding: 20px;
  overflow-y: auto;
}

.profile-info .info-item {
  margin-bottom: 15px;
}

.info-item label {
  font-weight: bold;
  margin-right: 10px;
}

.info-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.info-background {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.topic-item {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  gap: 15px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.topic-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.topic-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.topic-content {
  flex: 1;
}

.topic-info h3 {
  margin: 0 0 10px;
}

.author-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #666;
}

.description {
  margin: 10px 0 0;
}

.topic-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.btn-action {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
}

.btn-action:hover {
  color: #42b983;
}
</style>